<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加医院</title>
    <link  href="../../hos_manage/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="../css/messages_doctor_mes.css">
    <link rel="stylesheet" href="../css/sweetalert.css" >
    <link rel="stylesheet" href="../css/pageCode.css" />
    <link rel="stylesheet" type="text/css" href="/css/project/main.css"/>
    <link rel="stylesheet" href="/css/basic/basic.css">
    <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/basic/ie_basic.css">
    <![endif]-->
    <link rel="stylesheet" href="/css/project/user.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="/css/privilege/add_hospital.css">

    <script src="../js/jquery-1.9.1.min.js"></script>
</head>
<body>
    <%@ include file="../header.jsp"%>
    <!--内容-->
    <div class="containerone">
    <%@ include file="../left_menu.jsp"%>
        <!--右边内容-->
        <div class="right_cont">
        <!--右边导航下面内容-->
            <div class="message_hos_news_container" id="add_hospital">
                <div class="content">
        			<div class="add-hospital-head strong">
        				新增医院<addsvg></addsvg>
        				<div class="tag">
        					<tag></tag>
        				</div>
        			</div>
        			<div class="add-hospital-body">
                        <div class="add-hospital-row">
        					<span class='strong name'>医院编号</span>
                            <input class="add-hospital-input" v-model="hospital_id" placeholder="不超过5个字符">
                            <necessary></necessary>
        				</div>
        				<div class="add-hospital-row">
        					<span class='strong name'>医院名称</span>
                            <input class="add-hospital-input" v-model="name" placeholder="不超过20个字符">
                            <necessary></necessary>
        				</div>
                        <div class="add-hospital-row">
        					<span class='strong name'>医院描述</span>
                            <input class="add-hospital-input" v-model="descr" placeholder="不超过50个字符">
                            <necessary></necessary>
        				</div>
                        <div class="add-hospital-row">
        					<span class='strong name'>医院别名</span>
                            <input class="add-hospital-input" v-model="alias" placeholder="不超过20个字符">
                            <necessary></necessary>
        				</div>
                        <div class="add-hospital-row">
        					<span class='strong name middle'>医院类型</span>
                            <input class="add_hospital-radio middle" :class="{'add-hospital-input-checked': type == '1'}" type="radio" v-model="type" value="1">
                            <span class="middle">一级</span>
                            <input class="add_hospital-radio middle" :class="{'add-hospital-input-checked': type == '2'}" type="radio" v-model="type" value="2">
                            <span class="middle">二级</span>
                            <necessary></necessary>
        				</div>
                        <div class="add-hospital-row" v-show="type == '2'">
                            <span class='strong name middle'>上级医院</span>
                            <div class="" style="display:inline-block;margin-left:10px;">
                                <singleselect :list="hospitalList" :choosed="parent" value="parent" key="name" editable="false"></singleselect>
                            </div>
                            <necessary></necessary>
        				</div>
                        <div class="add-hospital-row">
        					<span class='strong name'>城市编号</span>
                            <input class="add-hospital-input" v-model="city" placeholder="城市编号不能超过4个字符">
                            <necessary></necessary>
        				</div>
                        <div class="add-hospital-row">
        					<span class='strong name middle'>额外信息</span>
                            <input class="add_hospital-radio middle" :class="{'add-hospital-input-checked': jsonType == '1'}" type="radio" v-model="jsonType" value="1">
                            <span class="middle">键值对</span>
                            <input class="add_hospital-radio middle" :class="{'add-hospital-input-checked': jsonType == '2'}" type="radio" v-model="jsonType" value="2">
                            <span class="middle">源码</span>
        				</div>
                        <div class="add-hospital-row">
                            <div class="key-value-container" v-show="jsonType == '1'">
                                <div class="" v-for="each in arry">
                                    key: <input class="add-hospital-input" v-model="each[0]">
                                    value: <input class="add-hospital-input" v-model="each[1]">
                                </div>

                            </div>
                            <div class="code-container" v-else>
                                <textarea name="name" rows="8" cols="80" v-model="json">
                                </textarea>
                            </div>
                        </div>
        				<div class="submit" @click="submit()">
        					保存
        				</div>
                        <div class="submit" @click="addKeyVal()" v-show="jsonType == '1'">添加key-value</div>
        			</div>
        		</div>
            </div>
        </div>
    </div>
    <script src="/js/sweetalert-dev.js"></script>
    <%@ include file="/svg/add.jsp"%>
    <%@ include file="/svg/necessary.jsp"%>
    <%@ include file="/svg/tag_svg.jsp"%>
    <%@ include file="/components/single_select.jsp"%>
    <script type="text/javascript">
        new Vue({
            el: "#add_hospital",
            data: {
                hospital_id: "",
                name: "",
                descr: "",
                alias: "",
                type: "1",
                parent: {},
                city: "",
                jsonType: '1',
                json: "{}",
                arry: [],
                hospitalList: [],
            },
            events: {
                selectedChange: function(data) {
                    this[data.type] = data.selected;
                }
            },
            methods: {
                openSelect: function(event) {
                    var target = event.target;
                    target.parentNode.querySelector(".select-content").classList.toggle("none");
                    target.parentNode.querySelector("input").focus();
                },
                chooseSelect: function(data, value, event) {
                    this.openSelect({
                        target: event.target.parentNode.parentNode
                    });
                    this[data] = value;
                },
                search: function(event, key) {
                    var target = event.target;
                    var value = target.value;
                    var list = target.parentNode.parentNode.querySelectorAll(".select-option");
                    [].forEach.call(list, function(item) {
                        if (item.innerHTML.indexOf(value) == -1) {
                            item.classList.add("none");
                        } else {
                            item.classList.remove("none");
                        }
                    });
                    this[key] = value;
                },
                submit: function() {
                    if (!/^[0-9]+$/.test(this.hospital_id)) {
                        swal("医院编号请输入数字");
                        return;
                    }
                    if (this.hospital_id.length > 5) {
                        swal("医院编号不能超过5个字符");
                        return;
                    }
                    if (this.type == 2 && this.parent == "") {
                        swal("请选择上级医院");
                        return;
                    }
                    if (this.name == "") {
                        swal("输入医院名称");
                        return;
                    }
                    if (this.name.length > 20) {
                        swal("医院名称长度不能超过20个字符");
                        return;
                    }
                    if (this.descr == "") {
                        swal("输入医院描述");
                        return;
                    }
                    if (this.descr.length > 50) {
                        swal("医院描述不能超过50个字符");
                        return;
                    }
                    if (this.alias == "") {
                        swal("输入医院别名");
                        return;
                    }
                    if (this.alias.length > 20) {
                        swal("医院别名不能超过20个字符");
                        return;
                    }
                    if (!/^[0-9]+$/.test(this.city)) {
                        swal("城市编号请输入数字");
                        return;
                    }
                    if (this.city.length > 5) {
                        swal("城市编号不能超过5个字符");
                        return;
                    }
                    try {
                        var map = JSON.parse(this.json);
                    } catch(e) {
                        swal("额外信息格式有误");
                        return;
                    }
                    if (this.jsonType == "1") {
                        this.json = this.arryToJson(this.arry) || this.json;
                    }
                    $.ajax({
                        type: 'POST',
                        url: "add_hospital.jsp",
                        data: {
                            act: "add_hospital",
                            hospital_id: this.hospital_id + "",
                            name: this.name,
                            descr: this.descr,
                            alias: this.alias,
                            type: this.type,
                            parent: this.parent.hospital_id,
                            city: this.city,
                            json: this.json,
                        },
                        success: function(res) {
                            res = JSON.parse(res);
                            if (res.errcode == 0) {
                                swal({
                                    title: "编辑完成",
                                }, function() {
                                    locationHerf("hospitals");
                                });
                            } else {
                                swal(res.errmsg);
                            }
                        },
                    });
                },
                addKeyVal: function() {
                    this.arry.push(["", ""]);
                },
                jsonToArry: function(json) {
                    if (json == "") {
                        return [];
                    }
                    try {
                        var map = JSON.parse(json);
                    } catch(e) {
                        return;
                    }
                    var arr = [];
                    for (var i in map) {
                        arr.push([
                            i,
                            map[i]
                        ])
                    }
                    return arr;
                },
                arryToJson: function(arry) {
                    if (!arry) {
                        return;
                    }
                    var map = {};
                    arry.forEach(function(item) {
                        map[item[0]] = item[1];
                    });
                    return JSON.stringify(map);
                },
                stringify: function(map) {
                    var str = JSON.stringify(map);
                    if (str == "") {
                        return "{}";
                    }
                    return str;
                },
            },
            ready: function() {
                // select选择失去焦点消失
                var selectContentList = $(".select .select-content");
                var	selectOptionList = $(".select>.select-option-list")
                $("#add_hospital").on("click", "*", function(event) {
                    if ($(this).hasClass("select")) {
                        event.stopPropagation();
                    }
                    if ($(this).hasClass("content")) {
                        selectContentList.each(function() {
                            $(this).parent().find(".select-content").addClass("none");
                        });
                        selectOptionList.each(function() {
                            $(this).addClass("none");
                        });
                    }
                })
                var self = this;
                this.$watch("jsonType", function() {
                    if (this.jsonType == '1') {
                        this.arry = this.jsonToArry(this.json);
                    } else {
                        this.json = this.arryToJson(this.arry) || this.json;
                    }
                });
                this.$watch("type", function() {
                    if (this.type == '1') {
                        this.parent = "";
                    }
                });
                $.ajax({
                    type: 'POST',
                    url: "add_hospital.jsp",
                    data: {
                        act: "generate_hospital",
                    },
                    success: function(res) {
                        res = JSON.parse(res);
                        if (res.errcode == 0) {
                            self.hospital_id = res.data.hospital_id;
                        } else {
                            swal(res.errmsg);
                        }
                    },
                });
                $.ajax({
                    type: 'POST',
                    url: "add_hospital.jsp",
                    data: {
                        act: "hospitals",
                        type: 1,
                    },
                    success: function(res) {
                        res = JSON.parse(res);
                        if (res.errcode == 0) {
                            self.hospitalList = res.data;
                        } else {
                            swal(res.errmsg);
                        }
                    },
                });
            },
            components: {
                addsvg: {template: "#add"},
                tag: {template: "#tag"},
                necessary: {template: "#necessary"},
                singleselect: singleselect,
            }
        });
    </script>
</body>
</html>
